<template>
    <section>
        <header>
        <div class="header_address">
            <a href="">
                <p>北京</p>
                <i></i>
            </a>
        </div>
        <div class="header_search">
            <router-link to="/search">
                <p>目的地/景点/酒店/邮轮</p>
            </router-link>
        </div>
        <div>
            <router-link to="/mylvmama">
                <img src="../../../static/imgs/pp.png">
            </router-link>
        </div>
        </header>

        <div class="banner">
            <div>
                <router-link to="/lunbo"><Slide></Slide></router-link>
            </div>
        </div>

        <div class="bg_1"></div>
        <main>
            <div class="main_1">
                <div class="main_1_ticket">
                    <div class="main_1_ticket_left">
                        <router-link to="/menpiao"></router-link>
                    </div>
                    <div class="main_1_ticket_center">
                        <a href="">境外门票</a>
                        <a href="">王牌景区</a>
                    </div>
                    <div class="main_1_ticket_right">
                        <a href="">境外玩乐</a>
                        <a href="">国内玩乐</a>
                    </div>
                </div>
                <div class="main_1_hotel">
                    <div class="main_1_hotel_left">



                        <router-link to="/jiudian"></router-link>


                    </div>
                    <div class="main_1_hotel_center">
                        <a href="">酒+景</a>
                    </div>
                    <div class="main_1_hotel_right">
                        <a href="">机+酒</a>
                    </div>
                </div>
                <div class="main_1_travel">
                    <div class="main_1_travel_left">

                        <router-link to="/travel" class="fei"></router-link>

                    </div>
                    <div class="main_1_travel_center">
                        <a href="">国内游</a>
                        <a href="">出境游</a>
                        <a href="">驴悦亲子游</a>
                    </div>
                    <div class="main_1_travel_right">
                        <a href="">周边游</a>
                        <a href="">邮轮</a>
                        <a href="">开心驴行</a>
                    </div>
                </div>
                <div class="main_1_fly">
                    <div class="main_1_fly_left">
                        <router-link to="/airticket" class="fei"><p>机票</p></router-link>
                    </div>
                    <div class="main_1_fly_center">
                        <a href=""><p>火车票</p></a>
                    </div>
                    <div class="main_1_fly_right">
                        <a href=""><p>签证</p></a>
                    </div>
                </div>
            </div>
            <div class="bg_1"></div>
            <div class="main_2">
                <div class="main_2_top">
                    <figure>
                        <router-link to="/menu">
                            <div>
                                <img src="../../../static/imgs/1483081065_42388.png">
                            </div>
                            <p>定制游</p>
                        </router-link>
                    </figure>
                    <figure>
                        <a href="">
                            <div>
                                <img src="../../../static/imgs/1501232290_73245.png">
                            </div>
                            <p>门票天天特价</p>
                        </a>
                    </figure>
                    <figure>
                        <a href="">
                            <div>
                                <img src="../../../static/imgs/1483081542_35835.png">
                            </div>
                            <p>自驾游</p>
                        </a>
                    </figure>
                    <figure>
                        <a href="">
                            <div>
                                <img src="../../../static/imgs/1482916883_65721.png">
                            </div>
                            <p>主题游</p>
                        </a>
                    </figure>
                </div>
                <div class="main_2_bottom">
                    <figure>
                        <a href="">
                            <div>
                                <img src="../../../static/imgs/1503026911_77356.png">
                            </div>
                            <p>特价机票</p>
                        </a>
                    </figure>
                    <figure>
                        <a href="">
                            <div>
                                <img src="../../../static/imgs/1482916779_55835.png">
                            </div>
                            <p>攻略</p>
                        </a>
                    </figure>
                    <figure>
                        <a href="">
                            <div>
                                <img src="../../../static/imgs/1496384549_56355.png">
                            </div>
                            <p>礼品卡</p>
                        </a>
                    </figure>


                    <figure @click="showFn">

                            <div>
                            </div>
                            <p>更多</p>
                        </a>
                    </figure>
                </div>
            </div>
            <div class="bg_2"></div>
            <div class="main_3">
                <div class="main_3_top">
                    <section>
                        <span></span>
                        <i></i>
                    </section>
                    <p>活动推荐</p>
                    <section>
                        <i></i>
                        <span></span>
                    </section>
                </div>
                <div class="main_3_bottom">
                    <div>
                        <router-link to='/guanggao'><img src="../../../static/imgs/1500600834_38160.jpg"></router-link>
                        <a href=""><img src="../../../static/imgs/1499743955_98384.png"></a>
                        <a href=""><img src="../../../static/imgs/1499744154_82655.png"></a>
                        <a href=""><img src="../../../static/imgs/1503023718_15993.jpg"></a>
                        <a href=""><img src="../../../static/imgs/1502863366_53933.jpg"></a>
                        <a href=""><img src="../../../static/imgs/1500607454_84252.jpg"></a>
                    </div>
                </div>
            </div>
            <div class="main_4">
                <div class="main_4_top">
                    <h4>限时抢购</h4>
                    <p><a href="">更多</a></p>
                </div>
                <div class="main_4_bottom">
                    <div>
                        <figure v-for="item in buy">
                            <router-link :to="'/zhangjiajie/'+item.id" @click="Top">
                                <img :src="item.imgurl">
                                <div>
                                    <p>{{item.title}}</p>
                                    <section><span>￥{{item.oldPrice}}</span>起</section>
                                </div>
                                <p class="main_4_bottom_part">仅剩{{item.soldCount}}份</p>
                            </router-link>
                        </figure>
                        <div class="main_4_bottom_more">
                            <a href=""><p>查看更多</p></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg_2"></div>
            <div class="main_5">
                <nav>
                    <a href="" class="main_5_active">景点门票</a>
                    <a href=""> 周边游</a>
                    <a href="">国内游</a>
                    <a href="">出境游</a>
                </nav>
                <section>


                    <router-link to='/jingdian'>


                        <div class="main_5_op">
                            <figure>
                                <transition name="img">
                                <img v-lazy= "list[0]">
                                </transition>
                                <div class="main_5_gold"></div>
                                <div class="main_5_price"><p>￥<span>29.9</span>起</p></div>
                            </figure>
                            <div class="main_5_address">北京欢乐谷</div>
                        </div>



                    </router-link>


                    <a href="">
                        <div class="main_5_op">
                            <figure>
                                 <img v-lazy="list[1]"> 
                                <div class="main_5_gold"></div>
                                <div class="main_5_price"><p>￥<span>29.9</span>起</p></div>
                            </figure>
                            <div class="main_5_address">北京欢乐谷</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="main_5_op">
                            <figure>
                                <img v-lazy="list[2]">
                                <div class="main_5_gold"></div>
                                <div class="main_5_price"><p>￥<span>29.9</span>起</p></div>
                            </figure>
                            <div class="main_5_address">北京欢乐谷</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="main_5_op">
                            <figure>
                                <img v-lazy="list[3]">
                                <div class="main_5_gold"></div>
                                <div class="main_5_price"><p>￥<span>29.9</span>起</p></div>
                            </figure>
                            <div class="main_5_address">北京欢乐谷</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="main_5_op">
                            <figure>
                                <img v-lazy="list[4]">
                                <div class="main_5_gold"></div>
                                <div class="main_5_price"><p>￥<span>29.9</span>起</p></div>
                            </figure>
                            <div class="main_5_address">北京欢乐谷</div>
                        </div>
                    </a>
                </section>
            </div>
        </main>
        <footer>
            <a href="">登录</a>
            <a href="">注册</a>
            <a href="">客服</a>
            <a href="">回到顶部</a>
        </footer>
    </section>
</template>
<script>

import Slide from "./slide/slide.vue"

export default{
    data(){
        return {
             list: [
                'static/imgs/8a12c0d1-327d-4789-811a-1637eaab5793_480_320.jpg',
                'static/imgs/30cd428b-2921-42c2-8199-1bb011ec0328_480_320.jpg',
                'static/imgs/37fd6d3e-407d-4ea3-aea2-10d752e95adc_480_320.jpg',
                'static/imgs/2258eb98-1f68-4f96-a794-d7a0fdc0025c_480_320.jpg',
                'static/imgs/360c660e-8c2b-4d40-9979-7d6d076e223f_480_320.jpg'
            ],
            buy:[]
        }
    },
    components:{
        Slide:Slide
    },
    methods:{
        hideFn(){
            this.$store.commit("changeState");
            document.body.style.overflow = 'hidden';
        },
        showFn(){
            this.$store.commit("changeShow");
            document.body.style.overflow="hidden";
        },
        Top(){
             document.body.scrollTop=0;
             // console.log(111)
        },
        
        request(){
            this.$http.get("./static/cityWalkList.json")
            .then(function(res){
                // console.log(res.body);
                this.buy=res.body;
            })
        }
    },
        mounted(){
        this.request();
        document.body.scrollTop=0;
        document.body.onscroll=null;
    }
}
</script>
<style scoped>
/*     头部样式     */
header{
    font-size: 0.3667rem;  
    height: 1.1333rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2667rem;
}
.header_address{
    position: relative;
}
.header_address a{
    color: #d30775;
}
header i:after{
    content: "";
    width: 0.15rem;
    height: 0.15rem;
    border-top: 0.0133rem solid #d30775;
    border-right: 0.0133rem solid #d30775;
    transform: rotate(135deg);
    position: absolute;
    top: .15rem;
    left: .9rem;
}
.header_search{
    width: 70%;
    height: 0.7333rem;
    line-height: .7333rem;
    border: 0.0133rem solid #dcdcdc;
    border-radius: 0.1333rem;
    margin-left: .4rem;
}
.header_search p{
    color:#aaa;
    font-size: 0.35rem;
    position: relative;
    margin-left: 1.0667rem;
}
.header_search p:before{
    content: "";
    width: .4rem;
    height: .4rem;
    background: url(../../../static/imgs/fangdajing.png)no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: -.8rem;
    top: 50%;
    margin-top: -.2rem;
}
/*      轮播图banner的样式结构 */
.baaner{
    width: 100%;
    height: 2rem;
    overflow: hidden;
}
.banner img{
    width: 100%;
    display: block;
}
/*      背景bg_1的样式*/
.bg_1{
    height: 0.08rem;
    background:#efeff7;
}
/*      主体第一块的内容样式 */
.main_1{
    padding: 0 6px;
}
.main_1 a{
    color: white;
    font-size: 0.3567rem;

}
    /*   主体第一块的门票的结构样式*/
.main_1_ticket{
    display: flex;
    justify-content: space-between;
    height: 2.6667rem;
}
.main_1_ticket_left{
    width: 33%; 
}
.main_1_ticket_right,.main_1_ticket_center{
    width: 33%;
    display: flex; 
    flex-flow: column; 
    justify-content: space-between;
}
.main_1_ticket_left a{
    display: block;
    height: 2.6667rem;
    width: 100%; 
    background: url(../../../static/imgs/1499222143_61663.png);
    background-size: 100% 100%;
    border-top-left-radius: 0.2667rem;
    border-bottom-left-radius: 0.2667rem;
}
.main_1_ticket_center a,.main_1_ticket_right a{
    display: block;
    height: 1.31rem; 
    line-height: 1.31rem;
    background: #ec4c40;
    text-align: center;
}
.main_1_ticket_right a:first-child{
    border-top-right-radius: 0.2667rem;
}
.main_1_ticket_right a:last-child{
    border-bottom-right-radius: 0.2667rem;
}
    /*  主体第一块的酒店的结构样式*/
.main_1_hotel{
    margin-top: 0.08rem;
    display: flex;
    justify-content: space-between;
    height:  1.7333rem; 
}
.main_1_hotel_left,.main_1_hotel_right,.main_1_hotel_center{
    width: 33%; 
}
.main_1_hotel_left a{
    display: block;
    height:  1.7333rem;
    width: 100%; 
    background: url(../../../static/imgs/1499221905_79016.png);
    background-size: 100% 100%;
    border-top-left-radius: 0.2667rem;
    border-bottom-left-radius: 0.2667rem;
}
.main_1_hotel_center a,.main_1_hotel_right a{
    display: block;
    height: 1.7333rem; 
    line-height: 1.7333rem;
    background: #f8791c;
    text-align: center;
}
.main_1_hotel_right a{
    border-top-right-radius: 0.2667rem;
    border-bottom-right-radius: 0.2667rem;
}
    /*  主体第一块的旅游的样式*/
.main_1_travel{
    margin-top: 0.08rem;
    display: flex;
    justify-content: space-between;
    height: 4.08rem;
}
.main_1_travel_left{
    width: 33%; 
}
.main_1_travel_right,.main_1_travel_center{
    width: 33%;
    display: flex; 
    flex-flow: column; 
    justify-content: space-between;
}
.main_1_travel_left a{
    display: block;
    height: 4.08rem;
    width: 100%; 
    background: url(../../../static/imgs/1499221459_82458.png);
    background-size: 100% 100%;
    border-top-left-radius: 0.2667rem;
    border-bottom-left-radius: 0.2667rem;
}
.main_1_travel_center a,.main_1_travel_right a{
    display: block;
    height: 1.3467rem; 
    line-height: 1.3467rem; 
    background: #7ec553;
    text-align: center;
}
.main_1_travel_right a:first-child{
    border-top-right-radius: 0.2667rem;
}
.main_1_travel_right a:last-child{
    border-bottom-right-radius: 0.2667rem;
}
    /*  主体第一块的机票的样式*/
.main_1_fly{
    margin-top: 0.08rem;
    display: flex;
    justify-content: space-between;
    height:  1.7333rem; 
}
.main_1_fly_left,.main_1_fly_right,.main_1_fly_center{
    width: 33%; 
}
.fei{
   display: block;
    height:  1.7333rem;
    width: 100%; 
    background: url(../../../static/imgs/1499221239_91608.png)no-repeat 30%,#5598dc;
    background-size: 30% 50%;
    border-top-left-radius: 0.2667rem;
    border-bottom-left-radius: 0.2667rem;
    position: relative; 
}
.main_1_fly_center a p,.main_1_fly_right a p{
    left: 55%;
    top: 30%;
    position: absolute;
}
.fei p{
    left: 55%;
    top: 30%;
    position: absolute;
}
.main_1_fly_center a{
    display: block;
    height: 1.7333rem; 
    background: #5598dc;
    background: url(../../../static/imgs/1493714602_44372.png)no-repeat 30%,#5598dc;
    background-size: 30% 50%;
    position: relative;
}
.main_1_fly_right a{
    display: block;
    height: 1.7333rem; 
    background: #5598dc;
    background: url(../../../static/imgs/1490347121_64791.png)no-repeat 30%,#5598dc;
    background-size: 30% 50%;
    position: relative;
}
.main_1_fly_right a{
    border-top-right-radius: 0.2667rem;
    border-bottom-right-radius: 0.2667rem;
}
/*      主体第二块的样式*/
.main_2 p{
    font-size: 0.2667rem;
    font-weight: bold;
}
.main_2 img{
    width: 1.0933rem;
}
.main_2 figure{
    width: 25%;
}
.main_2_top,.main_2_bottom{
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 0.32rem 0;
}
.main_2_bottom figure:last-child div{
    width: 1.0933rem;
    height: 1.0933rem;
    background: url(../../../static/imgs/moreIcon.png)no-repeat center,#5c9ffb;
    position: relative;
    left: 50%;
    margin-left: -.5545rem;
    border-radius: .5rem;
    margin-bottom: .058rem;
}
.main_2_bottom figure:last-child{
    position: relative;
}
    /*  背景bg_2的样式*/
.bg_2{
    height: 0.1333rem;
    background: #efeff7;
}
    /* 主体第三部分的结构样式*/
.main_3_top{
    width: 5.6rem;
    height: 1.2533rem;
    line-height: 1.2533rem;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #efeff7;
}
.main_3_top section{
    width: 1.7333rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.main_3_top span{
    display: block;
    width: 1.4133rem;
    height: 0.0267rem;
    background: gray;
}
.main_3_top i{
    display: block;
    width: 0.1067rem;
    height: 0.1067rem;
    border-radius: 50%;
    background: gray;
}
.main_3_bottom>div{
    display: flex;
     flex-wrap: wrap; 
     justify-content: space-between; 
}
.main_3_bottom img{
    height: 1.8533rem;
    width:100%;
}
.main_3_bottom a{
    display: inline-block;
    height: 1.8633rem;
    width:49.9%;
}
.main_3_bottom>div{
    width: 100%;
}
.main_3_bottom{
    height: 5.68rem;
    background: #dddddd;
}
    /*  主体第四部分限时抢购的样式*/
.main_4_top{
    height: 0.7867rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.0133rem solid #dddddd;
}
.main_4_top h4:before{
    content: "";
    height: 0.48rem;
    width: 0.1067rem;
    background: #d30775;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.2667rem;
    margin-bottom: .1rem;
}
.main_4_top p:after{
    content: "";
    width: 0.16rem;
    height: 0.1667rem;
    display: inline-block;
    border-top: 0.033rem solid #d30775;
    border-right: 0.033rem solid #d30775;
    transform: rotate(45deg);
    margin-right: .4rem;
    vertical-align: middle;
    margin-bottom: .1rem;
}
.main_4_top a{
    color: #d30775;
}
.main_4_bottom::-webkit-scrollbar{
     width: 0;
     height: 0; 
}
.main_4_bottom figure div{
    width: 3.7333rem;
    height: 1.7467rem;
    border-left: 0.0133rem solid #dddddd;
    border-right: 0.0133rem solid #dddddd;
    border-bottom: 0.0133rem solid #dddddd;
}
.main_4_bottom img{
    width: 3.7333rem;
    height: 2.5467rem;
}
.main_4_bottom>div>figure div p{
    width: 3.7333rem;
    height: .8rem;
    overflow: hidden;
    white-space:  normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.main_4_bottom_part{
    color: white;
    background: rgba(0,0,0,.5);
    width:3.7333rem;
    text-indent: .3rem;
    position: absolute;
    left: 0;
    height: .5rem;
    line-height: .5rem;
    top: 2.1rem;
}
.main_4_bottom section{
    margin-left: 2rem;
    margin-top: .3rem;
    color: #dddddd;
}
.main_4_bottom section span{
    font-size: 0.3467rem;
    color:#da2d8a;
}
.main_4_bottom>div{
    padding: 0.2667rem 0;  
    display: flex;
    justify-content: space-between;
}
.main_4_bottom{
    overflow: scroll;
    width: 95%;
    margin: 0 auto;
}
.main_4_bottom figure{
    margin-left: .2rem;
    position: relative;
}
.main_4_bottom figure:first-child{
    margin-left: 0;
}
.main_4_bottom_more p{
    left: .7rem;
    top:50%;
    margin-top: -.8rem;
    position: absolute;
}
.main_4_bottom_more{
    position: relative;
}
.main_4_bottom_more:before{
    content: "";
    display: inline-block;
    width: 0.3933rem;
    height: 0.3933rem;
    background: url(../../../static/imgs/icon5-1.png)no-repeat;
     background-position: 100% 100%; 
    position: absolute;
    left: 0;
    top:50%;
    margin-top: -.3rem;
}
    /*  主体第五部分的样式*/
.main_5 nav{
    height: 1.1733rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.3467rem;
}
.main_5 nav a{
    width: 2.0667rem;
    height: 0.7333rem;
    line-height: .7333rem;
    text-align: center; 
    border-radius: 1rem;
}
.main_5_active{
    background: #d30775;
    color: white;
}
.main_5 figure{
    width: 100%;
    height: 3.6rem;
    overflow: hidden;
    position: relative;
}
.main_5_op{
    padding-bottom: 0.1333rem;
}
.main_5 figure img{
    width: 100%;
    position: absolute;
    height: 6rem;
    top: 0;
    bottom: 0;
    margin: auto;
    
}
  img[lazy=loading] {
    transform: scale(1.5,1.5);
  }
    img[lazy=loaded] {
    transform: scale(1,.7);
    transition: transform 2s;
  }
.main_5_gold{
    background: url(../../../static/imgs/182891498612638_188x164.png)no-repeat;
    background-size: 100%;
    width:1.4rem;
    height: 1.6rem;
    position: absolute; 
    right: 0.1rem;
    top: .1rem;
}
.main_5_price{
    position: absolute;
    right: 0;
    bottom: 0.2667rem;
    font-size: 0.32rem;
    background: #ff720e;
    color: white;
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
}
.main_5_price span{
    font-size: 0.4267rem;
}
.main_5_price p{
    padding: .2rem;
}
.main_5_address{
    padding: 0.3333rem 0.2933rem;
    font-size: 0.3733rem;
}
    /*  底部footer的样式*/
footer{
    height: 1.1333rem;
    border-bottom: 0.0133rem solid gray;
    border-top: 0.0133rem solid gray;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer a{
    width: 25%;
    height: 0.7333rem;
    line-height: .7333rem;
    text-align: center;
    border-right: 0.0133rem solid gray;
     font-size: 0.3733rem; 
}
footer a:last-child{
    border-right: none;
}

</style>



